// 统计第一级
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Platform,
    ScrollView,
    Dimensions,
    ActivityIndicator,
    TouchableOpacity,
    InteractionManager,
    Navigator,
} from 'react-native';
import { Pie } from 'react-native-pathjs-charts'
var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar
import ColorMark from './statisicalColorMark'  //颜色标示view
import StatisicalItem from './statisicalItem'  //中间部分
import StatisocalBottom from './statisicalBottom' //底部
import Common from '../common/constants'
import IncomePush from '../Statisical/IncomePush'
import { StockLine } from 'react-native-pathjs-charts'
import moment from 'moment'
var Proptype = require('../Statisical/Proptype');//IconCell导入
var { width, height } = Dimensions.get('window');

var proData = [{
    imgurl: '1.png',
    maintitle: '已登记作品',
    imgurlandroid: 'jijiu',
    number1: '12234.6',

}, {
    imgurl: '1.png',
    maintitle: '已签订合约',
    imgurlandroid: 'jijiu',
    number1: '43321.6',

}];



export default class Statisical extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            pieDataAry: []
        };
    }
    
formatDate(date) { 
    var myyear = date.getFullYear(); 
    var mymonth = date.getMonth()+1; 
    var myweekday = date.getDate(); 

    if(mymonth < 10){ 
       mymonth = "0" + mymonth; 
    } 
    if(myweekday < 10){ 
       myweekday = "0" + myweekday; 
    } 
    return (myyear+"-"+mymonth + "-" + myweekday); 
} 
 getWeekStartDate() { 
   var now = new Date(); //当前日期 
      var nowDayOfWeek = now.getDay(); //今天本周的第几天 
      var nowDay = now.getDate(); //当前日 
      var nowMonth = now.getMonth(); //当前月 
      var nowYear = now.getYear(); //当前年 
      var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek); 
      return this.formatDate(weekStartDate); 
} 
    IncomePush() {

        InteractionManager.runAfterInteractions(() => {
            this.props.navigator.push({
                component: IncomePush,
            });
        });

    }


    render() {
        let data = [
      [{
        "x": 0,
        "y": 1
      }, {
        "x": 1,
        "y": 15
      }, {
        "x": 2,
        "y": 2
      }, {
        "x": 3,
        "y": 9
      },{
        "x": 4,
        "y": 1
      },{
        "x": 5,
        "y": 14
      },{
        "x": 6,
        "y": 2
      },]
    ]
    let options = {
      width: 300,
      height: 100,
      color: '#2980B9',
      margin: {
        top: 10,
        left: 35,
        bottom: 30,
        right: 10
      },
      animate: {
        type: 'delayed',
        duration: 200
      },
      axisX: {
        showAxis: true,
        showLines: false,
        showLabels: true,
        showTicks: true,
        zeroAxis: false,
        orient: 'bottom',
        tickValues: [],
        labelFunction: ((v) => {
          let d = moment(this.getWeekStartDate(),'YYYY-MM-DD')
          return d.add((v*2),'day').format('MM-DD')
        }),
        label: {
          fontFamily: 'Arial',
          fontSize: 8,
          fontWeight: true,
          fill: '#34495E'
        }
      },
      axisY: {
        showAxis: true,
        showLines: false,
        showLabels: true,
        showTicks: true,
        zeroAxis: false,
        orient: 'left',
        tickValues: [],
        label: {
          fontFamily: 'Arial',
          fontSize: 8,
          fontWeight: true,
          fill: '#34495E'
        }
      }
    }
        return (
            <View style={{ flex: 1, backgroundColor: '#ececec' }}>
                {/*导航栏*/}
                <NavigatorBar title='统计' widthWH={Platform.OS == 'ios' ? 15 : 15} />
                {/*<View style={{ marginTop: 30, height: 180,backgroundColor:'gray' }}>

                    <Proptype imageData={proData} />

                </View>*/}
                <ScrollView style={{ backgroundColor: '#ececec', paddingTop: 10 }}
                    showsVerticalScrollIndicator={false}
                >
                <View style={{
                    marginTop: 10, height: 180,
                    marginLeft: 10,
                    marginRight: 10,
                    marginBottom: 10,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white',
                    borderRadius:5

                }}>
                    <Text>近7日交易图</Text>
                    <StockLine data={data} options={options} xKey='x' yKey='y' />

                </View>

               <View style={{ marginTop: 1, height: 180,marginLeft:10,marginRight:10 ,borderRadius:5,flexDirection: 'row',
		justifyContent:'space-around',backgroundColor:'white'}}>

                    {/*<Proptype imageData={proData} />*/}
                    <View style = {{justifyContent: 'center',
        alignItems: 'center',}}>
                    <View style = {styles.cardImg}>
                        <Text style={styles.cardTextRedio}>
							{/**描述 */}
							{500}首
						</Text>
                        
                        
                    </View>
                    <Text style={styles.cardTextRedio1}>
							{/**描述 */}
							{500}首
						</Text>
                   </View>

                   <View style = {{justifyContent: 'center',
        alignItems: 'center',}}>
                    <View style = {styles.cardImg}>
                        <Text style={styles.cardTextRedio}>
							{/**描述 */}
							{500}首
						</Text>
                        
                        
                    </View>
                    <Text style={styles.cardTextRedio1}>
							{/**描述 */}
							{500}首
						</Text>
                   </View>
                    

                </View>


                
                
                    {/*文字*/}
                    <TouchableOpacity
                        onPress={() => this.IncomePush()}
                    >
                        <View style={{
                            alignItems: 'center', backgroundColor: '#0c7aff',
                            marginTop: 30, marginLeft: 40, marginRight: 40, height: 50, justifyContent: 'center',
                            borderTopLeftRadius: 5, borderTopRightRadius: 5
                        }}>
                            <Text style={{ alignItems: 'center' }}>收入渠道统计</Text>
                        </View>
                    </TouchableOpacity>
                    {/*圆*/}
                    <View style={{
                        alignItems: 'center', backgroundColor: '#0c7aff',
                        marginTop: 30, marginLeft: 40, marginRight: 40, height: 50, justifyContent: 'center',
                        borderTopLeftRadius: 5, borderTopRightRadius: 5
                    }}>
                        <Text style={{ alignItems: 'center' }}>复制权收入统计</Text>
                    </View>
                    <View style={{
                        alignItems: 'center', backgroundColor: '#0c7aff',
                        marginTop: 30, marginLeft: 40, marginRight: 40, height: 50, justifyContent: 'center',
                        borderTopLeftRadius: 5, borderTopRightRadius: 5

                    }}>
                        <Text style={{ alignItems: 'center' }}>表演权收入统计</Text>
                    </View>
                    <View style={{
                        alignItems: 'center', backgroundColor: '#0c7aff',
                        marginTop: 30, marginLeft: 40, marginRight: 40, height: 50, justifyContent: 'center',
                        borderTopLeftRadius: 5, borderTopRightRadius: 5
                    }}>
                        <Text style={{ alignItems: 'center' }}>网络传播权收入统计</Text>
                    </View>
                   
                </ScrollView>
            </View>
        )



    }



    componentDidMount() {
        let url = 'http://rapapi.org/mockjsdata/18730/statisticspie'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    pieDataAry: json.pie
                })

            })
    }


    leftAction = () => {

    }

    rightAction = () => {

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f7f7f7',
    },
    reidos: {

    },
    boxtr: {
		flexDirection: 'row',
		justifyContent: 'center',
		paddingTop: 3,
		paddingBottom: 10,
		paddingLeft: 5,
		paddingRight: 5,
        // backgroundColor: '#fff',
        backgroundColor: 'red',
	},
	boxtd: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		// backgroundColor: 'blue',
        backgroundColor: '#fff',
        marginTop : 0 ,
        // backgroundColor:'rgba(255,255,255,0.0)',
        
	},
	cardImg: {
		width: 100,
		height: 100,
		marginTop:20,
		// marginBottom:5,
        borderRadius:75,
        backgroundColor : 'rgb(141,197,235)',
		// backgroundColor : 'black',
        borderWidth:1,
        borderColor:'blue',
        // position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
	},
	cardText: {
		color: 'red',
		fontSize: 14,
		marginTop: -1,
		
        // opacity:0.0,
        // fontWeight:'bold',
	},
    cardTextRedio : {
        color: 'red',
		fontSize: 14,
        // justifyContent: 'center',
        // alignItems: 'center',
        // opacity:0.0,
        // position: 'relative',
        fontWeight:'bold',
        backgroundColor:'rgba(255,255,255,0.0)',
        
    },
    cardTextRedio1 : {
        color: 'red',
		fontSize: 14,
        justifyContent: 'center',
        alignItems: 'center',
        // opacity:0.0,
        // position: 'relative',
        fontWeight:'bold',
        backgroundColor:'rgba(255,255,255,0.0)',
        marginTop:20
    },
});
